<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XR ❤️</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        canvas {
            border: 3px solid #ddd;
            border-radius: 15px;
            background: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .controls {
            margin-top: 20px;
        }

        button {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 10px;
            transition: transform 0.2s;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .status {
            margin-top: 15px;
            font-size: 18px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>XR ❤️</h1>
        <canvas id="animationCanvas" width="800" height="500"></canvas>
        <div class="controls">
            <button onclick="startAnimation()">开始绘制</button>
            <button onclick="pauseAnimation()">暂停</button>
            <button onclick="resetAnimation()">重新开始</button>
        </div>
        <div class="status" id="status">点击"开始绘制"观看动画</div>
    </div>

    <script>
        // 获取canvas和上下文
        const canvas = document.getElementById('animationCanvas');
        const ctx = canvas.getContext('2d');
        const statusElement = document.getElementById('status');

        // 星星类
        class Star {
            constructor(x, y, color, type) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.type = type;
                this.size = type === 'heart' ? 6 : 8;
                this.alpha = 0;
                this.targetAlpha = 1;
                this.growing = false;
            }

            // 创建星星路径
            createStarPath() {
                ctx.beginPath();
                for (let i = 0; i < 10; i++) {
                    const angle = (i * Math.PI) / 5;
                    const radius = i % 2 === 0 ? this.size : this.size * 0.4;
                    const x = this.x + Math.cos(angle) * radius;
                    const y = this.y + Math.sin(angle) * radius;
                    if (i === 0) {
                        ctx.moveTo(x, y);
                    } else {
                        ctx.lineTo(x, y);
                    }
                }
                ctx.closePath();
            }

            // 绘制星星
            draw() {
                if (this.alpha <= 0) return;

                this.createStarPath();

                // 填充
                ctx.fillStyle = this.color.replace(')', `, ${this.alpha})`).replace('rgb', 'rgba');
                ctx.fill();

                // 边框
                ctx.strokeStyle = this.type === 'heart' ? 'darkred' : 'orange';
                ctx.lineWidth = 1;
                ctx.stroke();
            }

            // 更新透明度
            update() {
                if (this.growing) {
                    this.alpha = Math.min(this.alpha + 0.1, this.targetAlpha);
                    if (this.alpha >= this.targetAlpha) {
                        this.growing = false;
                    }
                }
            }
        }

        // 生成字母 X 的星星坐标
        function generateXStars() {
            const stars = [];
            const offsetX = 100;  // X字母起始位置
            const offsetY = 150;

            // X 字母由两条对角线组成
            // 从左上到右下的对角线
            for (let i = 0; i < 15; i++) {
                const x = offsetX + i * 12;
                const y = offsetY + i * 12;
                stars.push(new Star(x, y, 'gold', 'text'));
            }

            // 从左下到右上的对角线
            for (let i = 0; i < 15; i++) {
                const x = offsetX + i * 12;
                const y = offsetY + 180 - i * 12;
                stars.push(new Star(x, y, 'gold', 'text'));
            }

            return stars;
        }

        // 生成字母 R 的星星坐标
        function generateRStars() {
            const stars = [];
            const offsetX = 650;  // R字母起始位置
            const offsetY = 150;

            // R 字母结构
            // 左侧竖线
            for (let i = 0; i < 16; i++) {
                stars.push(new Star(offsetX, offsetY + i * 12, 'gold', 'text'));
            }

            // 上面横线
            for (let i = 0; i < 8; i++) {
                stars.push(new Star(offsetX + i * 10, offsetY, 'gold', 'text'));
            }

            // 右侧上半部分竖线
            for (let i = 0; i < 8; i++) {
                stars.push(new Star(offsetX + 70, offsetY + i * 12, 'gold', 'text'));
            }

            // 中间横线
            for (let i = 0; i < 7; i++) {
                stars.push(new Star(offsetX + i * 10, offsetY + 90, 'gold', 'text'));
            }

            // 右下部分斜线（R的腿）
            for (let i = 0; i < 10; i++) {
                const x = offsetX + 30 + i * 6;
                const y = offsetY + 90 + i * 10;
                stars.push(new Star(x, y, 'gold', 'text'));
            }

            return stars;
        }

        // 生成爱心的星星坐标 - 精确计算XR的中点
        function generateHeartStars() {
            const stars = [];

            // X字母的中心位置：x=100+90=190, y=150+90=240
            // R字母的中心位置：x=650+35=685, y=150+90=240
            // 两字母中心的中点：x=(190+685)/2=437.5, y=240

            const centerX = 437.5;  // XR两个字母的精确中点
            const centerY = 250;

            // 生成爱心形状的点
            for (let i = 0; i < 100; i++) {
                const t = (i / 100) * 2 * Math.PI;
                const x = 16 * Math.pow(Math.sin(t), 3);
                const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));

                // 缩放和平移
                const screenX = centerX + x * 5;
                const screenY = centerY + y * 4;

                stars.push(new Star(screenX, screenY, 'red', 'heart'));
            }

            return stars;
        }

        // 所有星星数据
        let allStars = [];
        let currentFrame = 0;
        let animationId = null;
        let isPlaying = false;
        let animationSpeed = 5; // 每隔多少帧绘制一个星星

        // 初始化星星
        function initStars() {
            const xStars = generateXStars();
            const rStars = generateRStars();
            const heartStars = generateHeartStars();

            allStars = [...xStars, ...rStars, ...heartStars];
            currentFrame = 0;

            // 重置所有星星的透明度
            allStars.forEach(star => {
                star.alpha = 0;
                star.growing = false;
            });
        }

        // 绘制函数
        function draw() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制所有星星
            allStars.forEach(star => {
                star.update();
                star.draw();
            });
        }

        // 动画函数
        function animate() {
            if (!isPlaying) return;

            draw();

            // 控制绘制速度
            if (currentFrame % animationSpeed === 0) {
                const starIndex = Math.floor(currentFrame / animationSpeed);
                if (starIndex < allStars.length) {
                    allStars[starIndex].growing = true;

                    // 更新状态显示
                    const xCount = generateXStars().length;
                    const rCount = generateRStars().length;

                    if (starIndex < xCount) {
                        statusElement.textContent = "正在绘制：X...";
                    } else if (starIndex < xCount + rCount) {
                        statusElement.textContent = "正在绘制：R...";
                    } else {
                        statusElement.textContent = "正在绘制：爱心...";
                    }
                } else {
                    // 绘制完成
                    statusElement.textContent = "绘制完成！XR ❤️";
                    isPlaying = false;
                    return;
                }
            }

            currentFrame++;
            animationId = requestAnimationFrame(animate);
        }

        // 开始动画
        function startAnimation() {
            if (!isPlaying) {
                isPlaying = true;
                statusElement.textContent = "正在绘制：X...";
                animate();
            }
        }

        // 暂停动画
        function pauseAnimation() {
            isPlaying = false;
            if (animationId) {
                cancelAnimationFrame(animationId);
            }
            statusElement.textContent = "已暂停";
        }

        // 重置动画
        function resetAnimation() {
            pauseAnimation();
            initStars();
            draw();
            statusElement.textContent = "点击\"开始绘制\"观看动画";
        }

        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            initStars();
            draw();
        });
    </script>
</body>
</html>